<template>
    <div class="home">

        <h1 style="margin-bottom:25px">个人中心</h1>
        <el-row>
            <el-col :span="7"><div class="grid-content bg-purple"></div></el-col>
              <el-col :span="10">
                <div class="grid-content bg-purple-light" style="margin-left:-100px">
                  <el-form :model="formData"  ref="formData" label-width="150px">
                    <el-form-item label="账号" >
                      <el-input :disabled="true" v-model ="formData.account"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" class="password">
                      <el-input v-model ="formData.password"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" class="nickname">
                      <el-input v-model ="formData.name"></el-input>
                    </el-form-item>
                    <el-form-item label="专业" class="class">
                      <el-input v-model ="formData.field"></el-input>
                    </el-form-item>
                    <el-form-item label="教育经历" class="class">
                      <el-input v-model ="formData.experience"></el-input>
                    </el-form-item>
                </el-form>
                <div class="button1">
                    <el-button @click="$router.back(-1)">返回</el-button>
                    <el-button type="primary" @click="submitForm(formData)">确认</el-button>
                </div>
                
                </div>
              </el-col>
            <el-col :span="7"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
    </div>
</template>

<style>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  /* .bg-purple-dark {
    background: #fdfeff;
  }
  .bg-purple {
    background: #fdfeff;
  }
  .bg-purple-light {
    background: #fdfeff;
  } */
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    /* background-color: #fdfeff; */
  }


</style>

<script>
import { getStore } from "../../libs/storage";
export default {
    data() {
      return{
        formData:{
          account: '',
          password: '',
          name: '',
          field: '',
          experience: ''
        }
      }
    },
  created() {
            this.initialize();
            console.log()
        },
  methods: {
    initialize(){
            this.$axios
                .post("/teacpersion", {
                teacherid: getStore("teacherid")
                })
                .then(resp => {
                if (resp && resp.status === 200) {
                   this.formData.account = resp.data[0].teacAccount;
                   this.formData.password = resp.data[0].teacPass;
                   this.formData.name = resp.data[0].teachername;
                   this.formData.field = resp.data[0].field;
                   this.formData.experience = resp.data[0].experience;
                    return;
                }
                })
                .catch(failResponse => {
                });
            },            
    submitForm(formData) {
        var this_ = this;
        // this.$refs[dataForm].validate((valid) => {
        // if (valid) {
            this.$axios
            .post("/teacherupdata", 
            {
            teacherid: getStore("userid"),
            teacAccount:this.formData.account,
            teacPass:this.formData.password,
            teachername:this.formData.name,
            field:this.formData.field,
            experience:this.formData.experience  
            }).then(resp => {
                if (resp && resp.data.code==200) {
                    this.$notify({
                    title: '成功',
                    message: '个人信息修改成功',
                    type: 'success'
                    });
                    this.initialize();
                }
            })
        // } else {
        //     console.log("error!!!");
        //     this_.$message.error("修改失败!!!");
        //     return false;
        // }
        //});
    }
  }
}
</script>
